﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page language="java" import="com.wuliu.model.sys.User" %>
<%@ page language="java" import="com.wuliu.util.BaseUtil" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <title>网豆物流平台-菜单管理</title>
    <link href="<%=path %>/web/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="<%=path %>/web/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>
    <link href="<%=path %>/web/css/colorbox.css" rel="stylesheet" type="text/css"  />
    <script src="<%=path %>/web/js/jquery-1.11.1.min.js"></script>
    <script src="<%=path %>/web/js/jquery.colorbox-min.js"></script>
    <script src="<%=path %>/web/zTree_v3-master/js/jquery.ztree.core.js"></script>
    <script src="<%=path %>/web/zTree_v3-master/js/jquery.ztree.excheck.js"></script>
	<script src="<%=path %>/web/zTree_v3-master/js/jquery.ztree.exedit.js"></script>

    <script type="text/javascript">
    var curEditId="";
    $(document).ready(function(){ 
		$("#add").colorbox({
			inline:true,
			width:"550px",
			close:"关闭",
			overlayClose:false  
		});
		$("#edit").colorbox({
			inline:true,
			width:"550px",
			close:"",
			overlayClose:false,
			onOpen:function(){ 
			//alert("sss");   
			//alert(curEditId);
			    if(curEditId==""){
					alert("请先选择一条数据！");
					$(this).colorbox.close();
					return;
				}
				$.ajax({
					type:"post",
					dataType:"json",
					url:path+"/MenuAction!getMenuInfo",
					data:{id:curEditId},
					success:function(data){  
						$("#menuId").val(data.menuId);		
						$("#menuName").val(data.menuName);
						$("#parentId").val(data.parentId);
						$("#menuRequest").val(data.menuRequest);
						$("#sortNum").val(data.sortNum);  	
						$("#menuImg").val(data.menuImg);	
						$("#activeFlag").val(data.activeFlag);		 
					}
				});
			}
		});
		
	});

	var path = "<%=path%>";
		
	String.prototype.replaceAll = function(s1,s2){    
	   return this.replace(new RegExp(s1,"gm"),s2);   
	};
	function close_box(id){		   
		$("#"+id).colorbox.close();		
	}
	//zTree参数设置
	var setting = {
		check: {
			enable: false
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: false
		},
		edit: {
			enable: true,
			editNameSelectAll: true,
			removeTitle: "删除",
			renameTitle: "修改"
		},
		callback: {
			//beforeDrag: beforeDrag,
			beforeEditName: beforeEditName,
			beforeRemove: beforeRemove,
			//beforeRename: beforeRename,
			onRemove: onRemove,
			//onRename: onRename
		}
	};
	
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
			+ "' title='add node' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_"+treeNode.tId);
		if (btn) btn.bind("click", function(){
	//alert("sss");
		$("#menuId").val("");		
		$("#menuName").val("");
		$("#parentId").val("");
		$("#menuRequest").val("");
		$("#sortNum").val("");  
		$("#menuImg").val("");
		$("#activeFlag").val("");
		$("#parentId").val(treeNode.id);
		$("#add").click();
			//openadd(treeNode.id);
			/*
			var zTree = $.fn.zTree.getZTreeObj("menuTree");
			zTree.addNodes(treeNode, {id:(100 ), pId:treeNode.id, name:"新菜单"});
			return false;
			*/
		});
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
	};
			

	$(function () {
	    load();
	});
	
	function load() {
		$.ajax({
			url : path+"/MenuAction!getMenuTree",
			type : "post",
			dataType : "json",
			data : "",
			beforeSend : function(){
			
			},
			success : function(data){
			//alert(JSON.stringify(data));
				setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
				var zTreeObj = $.fn.zTree.init($("#menuTree"), setting, data);
				zTreeObj.expandAll(true);
			},
			error : function(){
				alert("系统错误，请联系管理员！");
			}
		});

	}
	
	function save() {

	    if ($("#menuName").val() == "") {
	        //layer.tips('不能为空', '#menuName');
	        return;
	    }
	    var formdata = {
	        flag: "add",
	        menuId: $("#menuId").val(),
	        parentId: $("#parentId").val(),
	        menuName: $("#menuName").val(),
	        menuRequest: $("#menuRequest").val().replaceAll("&","@"),
	        menuImg:$("#menuImg").val(),
	        sortNum:$("#sortNum").val(),
	        menuImg:$("#menuImg").val(),
	        activeFlag: $("#activeFlag").val(),
	    };
//alert("aaa");
	    $.ajax({
	        url: path+"/MenuAction!saveMenuAjax",
	        timeout: 300000,
	        type: "post",
	        data: formdata,
	        success: function (data) {
	            close_box('ae_box');
	            alert(data);
	            load();
	        }
	    });
	}
	
	function beforeEditName(treeId, treeNode) {
	
		var zTree = $.fn.zTree.getZTreeObj("menuTree");
		zTree.selectNode(treeNode);
		//return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？");
		curEditId=treeNode.id;
		$("#edit").click();
		return false;
	}
	
	function beforeRemove(treeId, treeNode) {
	
		var zTree = $.fn.zTree.getZTreeObj("menuTree");
		zTree.selectNode(treeNode);
		return confirm("确认删除  " + treeNode.name + " 以及其下属的子功能吗？");
	}
	

	
	function edt() {
	    if ($("#menuName").val() == "") {
	        layer.tips('不能为空', '#menuName');
	        return;
	    }
	    if ($("#menuRequest").val() == "") {
	        layer.tips('不能为空', '#menuRequest');
	        return;
	    }
	    if ($("#menuImg").val() == "") {
	        layer.tips('不能为空', '#menuImg');
	        return;
	    }
	   	if ($("#sortNum").val() == "") {
	        layer.tips('不能为空', '#sortNum');
	        return;
	    }
	    if ($("#activeFlag").val() == "") {
	        layer.tips('不能为空', '#activeFlag');
	        return;
	    }
	    var formdata = {
	        flag: "edt",
	        parentId: $("#parentId").val(),
	        menuId: $("#menuId").val(),
	        menuName: $("#menuName").val(),
	        menuRequest: $("#menuRequest").val(), 
	        sortNum: $("#sortNum").val(),
	        activeFlag: $("#activeFlag").val(),
	        menuImg:$("#menuImg").val(),
	    };
	    $.ajax({
	        url: path+"/MenuAction!saveMenuAjax",
	        timeout: 300000,
	        dataType: "json",
	        type: "post",
	        data: formdata,
	        success: function (data) {
	            close_box("add_box");
	            alert(data.msg);
	            load();
	        }
	    });
	}
		
	function onRemove(e, treeId, treeNode) {
		var formdata = {
	        flag: "del",
	        menuId: treeNode.id,
	    };
		$.ajax({
			url : path+"/MenuAction!delMenuAjax",
			type : "post",
			data : formdata,
			success : function(data){
				alert(data);
				load();
			}
		});
	}
	</script>
		<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	</style>
</head>
<body>

    <div class="container-fluid">
        <div class="row-fluid">
            <h4>功能列表</h4>
            <div class="w">
                <div class="col-md-4">
                    <ul id="menuTree" class="ztree"></ul>
                </div>
                <a href="#ae_box" id="add" style="display:none"></a>
                <a href="#ae_box" id="edit" style="display:none"></a>
            </div>
			
			<div style="display:none;background-color:#ffccdd;">
			   	<div id="ae_box">
			   	<form method="post" action="">   
			    	 <table class="table table-bordered table-header">
			    	 	<thead>  
				    	 	<tr>
					            <th colspan="4">维护菜单</th>               
						    </tr>
					    </thead>
					    <tbody>
					        <tr>
					            <td  align="right">
					            	菜单名称：
					            </td>
					            <td align="left"   >
					            	<input type="hidden" name="parentId" id="parentId" value=""/>
	                            	<input type="hidden" name="menuId" id="menuId" value="" />
	                                <input type="text" class='form-control' name="menuName" id="menuName" placeholder="菜单名称">
					            </td>  
					            <td align="right">菜单请求：
					            </td >
					            <td align="left" >
									<input type="text" class='form-control' name="menuRequest" id="menuRequest" placeholder="菜单请求">
					            </td> 
					        </tr>
					        <tr>
							    <td align="right">菜单图片：</td>
								<td>
								     <input type="text" class='form-control' name="menuImg" id="menuImg" placeholder="菜单图片">
								</td>
								<td align="right">排序：</td>
								<td>
								    <input type="text" class='form-control' name="sortNum" id="sortNum" placeholder="排序">
								</td> 
							</tr>
							<tr> 
							    <td align="right">是否可用：</td>
								<td colspan="3">
								   <select class='form-control' name="activeFlag" id="activeFlag" placeholder="是否可用">
	                                	<option value="">-选择-</option>
	                                	<option value="0">-可用-</option>
	                                	<option value="1">-不可用-</option>
	                                </select>
								</td>  
							</tr>
						</tbody>
						<tfoot>  
							<tr> 
								<td colspan="4" align="center">
								    <button class="btn btn-default" id="btnSave_edit" onclick="save()" type="button" ><span class="glyphicon glyphicon-ok"></span>保  存</button>
							 		<button class="btn btn-default" type="reset" onclick="close_box('ae_box')" ><span class="glyphicon glyphicon-remove"></span> 取  消</button>
			          			</td> 
							</tr> 
						</tfoot>
					</table> 
			    	</form>
			   </div>
			</div>
            
        </div>
    </div>

</body>
</html>
